<template>
  <div class="search">
    <div class="logo"></div>
    <div class="input-wrapper">
      <div class="input-type" @click="typeShow = !typeShow">
        <p>{{type.name}}</p>
      </div>
      <ul class="type-option" v-show="typeShow">
        <li v-for="(item, index) in typeList" :key="index" @click="_select(item)">{{item.name}}</li>
      </ul>
      <input type="text" v-model="content">
      <div class="searchBtn" @click="search"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import * as exampleApi from 'api/example'

  export default {
    data () {
      return {
        content: '',
        type: {},
        typeShow: false,
        typeList: {
          type: Array,
          default: []
        }
      }
    },
    props: {
      textS: '',
      typeS: {}
    },
    created() {
      exampleApi.modePost('/weixin/activitiyType', {}).then(res => {
        let typeList = [{
          id: '',
          name: '全部'
        }]
        if (res.data.data) {
          res.data.data.forEach(item => {
            typeList.push({
              id: item.id,
              name: item.name
            })
          })
        }
        this.typeList = typeList
        if (this.typeList.length) {
          this.type = this.typeList[0]
          this._initSearch()
        }
      })
    },
    methods: {
      search() {
        this.$emit('search', this.content, this.type)
      },
      _select(val) {
        this.type = val
        this.typeShow = false
      },
      _initSearch() {
        this.content = this.textS
        let index = this.typeList.findIndex(el => el === this.typeS)
        if (index === -1) {
          this.type = this.typeList[0]
        } else {
          this.type = this.typeList[index]
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .search{
    position: relative;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #ffffff;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .logo{
      width: 43px;
      height: 43px;
      flex: 0 0 43px;
      background: url('../assets/image/logo_1.png') no-repeat center / 100%;
    }
    .input-wrapper{
      position: relative;
      flex: 1;
      margin-left: 17px;
      height: 50px;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 0 55px 0 120px;
      background-color: #e6e6e6;
      input{
        outline: none;
        background-color: transparent;
        border: none;
        width: auto;
        height: 100%;
        line-height: 50px;
        font-size: 22px;
        color: #333;
      }
      .searchBtn{
        position: absolute;
        top: 0;
        right: 18px;
        width: 33px;
        height: 100%;
        background: url('../assets/image/icon_search.png') no-repeat center center / 33px 33px;
      }
      .input-type{
        position: absolute;
        top: 5px;
        left: 5px;
        width: auto;
        height: 40px;
        background-color: #1499ff;
        border-radius: 4px;
        box-sizing: border-box;
        padding-right: 30px;
        p{
          font-size: 22px;
          color: #fff;
          line-height: 40px;
          padding-left: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &::after {
          position: absolute;
          top: 16px;
          right: 12px;
          content: ' ';
          display: block;
          width: 14px;
          height: 8px;
          background: url('../assets/image/icon_arrow_down.png') no-repeat center / 100% ;
        }
      }
      .type-option{
        position: absolute;
        top: 45px;
        left: 5px;
        width: auto;
        padding: 5px;
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #ddd;
        li{
          height: 30px;
          line-height: 30px;
          color: #333;
          font-size: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
